import React, {PureComponent} from 'react'
// import Temper from '../component/chart/temper'
// import Tabs from 'antd/lib/tabs'
import '../../../css/flow-table.scss'
import '../../../css/flow-line.scss'
import Tabs from '../../Tabs'
import '../../../css/temper.scss'
import Table from 'antd/lib/table'
import {millToString} from '../../util/util'

const Tab = Tabs.Tab;
const columns = [
    {
        title: '合同号',
        dataIndex: 'orderNo',
        key: 'orderNo',
        width:'10%'
    }, {
        title: '项目名称',
        dataIndex: 'projectName',
        width:'10%',

        key: 'projectName',
    }, {
        title: '备货完成时间',
        dataIndex: 'stockFinishTime',
        key: 'stockFinishTime',
        width:'10%',
        render: val => millToString(val)
    },
    {
        title: '订单状态',
        dataIndex: 'status',
        key: 'status',
        width:'10%',

    },
    {
        title: '客户名称',
        dataIndex: 'customerName',
        key: 'customerName',
        width:'10%',

    },
    {
        title: '办事处',
        dataIndex: 'office',
        key: 'office',
        width:'10%',
        render: (value) => value !== 'None' && value
    }
];
class Flow extends PureComponent {

    render() {
        const {data} = this.props
        const flow = [
            {
                title:'合同评审',
                value:data.submitTime
            },
            {
                title:'订单录入',
            },
            {
                title:'开始备货',
                value:data.stockStartTime
            },
            {
                title:'备货完成',
                value:data.stockFinishTime
            },
            {
                title:'已发货',
                value:data.deliveryTime
            },
            {
                title:'全部签收',
                value:data.receiveTime
            }
        ]

        const flow1 = [
            {
                // title:'开始备货',
                value:data.stockStartTime
            },
            {
                // title:'备货完成',
                value:data.stockFinishTime
            },
            {
                // title:'已发货',
                value:data.deliveryTime
            },
            {
                title:'到货签收',
                value:data.receiveTime
            }
        ]

        return (
            <div className="flow-table">
                <Table columns={columns} dataSource={[data]} pagination={false}/>
                <div className="flow-container">
                    {flow.map((val,index)=>{
                      return (<div className="flow-point">
                          <div className="flow-circle" onClick={this.props.clickToDetail}/>
                          <p className="flow-text-top">{val.title}</p>
                          <p className="flow-text-bottom">{millToString(val.value)}</p>
                      </div>)
                    })}
                    <div className="flow-line"/>
                    <div className="flow-box">
                        {flow1.map((val, index) => {
                            return (<div className="flow-tip-box" style={{left: index * 100 / 3 + '%'}}>
                                <div className="flow-circle flow-circle-little"/>
                                <p className="flow-text-top">{val.title}</p>
                                <p className="flow-text-bottom">{millToString(val.value)}</p>
                            </div>)
                        })}
                    </div>

                    {/*<div className="flow-box">*/}
                        {/*<div className="flow-pos-text">滨州</div>*/}
                        {/*{[1, 2, 3, 4].map((val, index) => {*/}
                            {/*return (<div className="flow-tip-box" style={{left: index * 100 / 3 + '%'}}>*/}
                                {/*<div className="flow-circle flow-circle-little"/>*/}
                                {/*<p className="flow-text-top">合同评审</p>*/}
                                {/*<p className="flow-text-bottom">2017-02-21 09:24</p>*/}
                            {/*</div>)*/}
                        {/*})}*/}
                    {/*</div>*/}
                </div>
            </div>
        )
    }

}

export default Flow